<template lang="pug">
  .register
    .content
      p 布勒游戏，实现你价值的快感
      .r-form
        h3 注 册
        .rf-line
          span.label 账号:
          input(id="phone" @blur = 'phonecheck(false)' v-model='phone' @focus='clear' autocomplete="off" type='text' )
        p.aleary() {{phonemessage}}
        .rf-line
          span.label 密码:
          input(id="pwd1",type='password' autocomplete="new-password" @blur='password' v-model='passwords' @focus='clear')
        p.aleary() {{passwordmessage}}
        .rf-line
          span.label 确认密码:
          input(id="pwd2",type='password' autocomplete="new-password" @blur='surepassword' v-model='surepasswords' @focus='clear')
        p.aleary() {{suremessage}}
        .rf-line.rf-code
          span.label 验证码:
          input(id="code"  autocomplete="off" type='text' v-model='codesure' @blur='codesures'  @focus='clear')
          .code-btn(@click="getCode()" id="vertifyCode") 获取验证码
        p.aleary() {{surecodemessage}}
        .registerBtn(@click="registerUser()") 注 册
        .loginWay(@click="changePage('/login')") 使用已有帐户登录
  //
</template>
<script>
import $ from "jquery";
import u from "./../common";
import { react } from "babel-types";

export default {
  name: "register",
  data() {
    return {
      phone: "",
      aleary: false,
      flag: false,
      code: "",
      phonemessage: "",
      passwordmessage: "",
      suremessage: "",
      passwords: "",
      surepasswords: "",
      codesure: "",
      surecodemessage: "",
      codetime: true
    };
  },
  mounted() {
    this.$parent.flag1 = false;
    this.$parent.flag2 = false;
    $(".register").height($(window).height());
    $(window).resize(function() {
      $(".register").height($(window).height());
    });
  },
  methods: {
    clear() {
      this.phonemessage = "";
      this.passwordmessage = "";
      this.suremessage = "";
      this.surecodemessage = "";
    },
    password() {
      if (this.passwords.trim() === "") {
        this.passwordmessage = "密码为空";
      } else if (this.passwords.trim().length < 6) {
        this.passwordmessage = "密码强度太弱";
      }
    },
    surepassword() {
      if (this.surepasswords.trim() !== this.passwords.trim()) {
        this.suremessage = "两次密码不一致";
      } else if (this.passwords.trim() === "") {
        this.suremessage = "密码为空";
      } else if (this.passwords.trim().length < 6) {
        this.suremessage = "密码强度太弱";
      }
    },
    codesures() {
      if (this.codesure.trim() === "") {
        this.surecodemessage = "验证码为空";
      }
    },
    phonecheck(flag) {
      let pattern = /^1[34578]\d{9}$/;
      if (this.phone === "") {
        this.phonemessage = "请填写账号";
      } else if (!pattern.test(this.phone)) {
        this.phonemessage = "手机号不正确";
      } else {
        if (flag) return;
        u.phoneCheck(
          {
            phone: this.phone
          },
          data => {
            if (data.code == 200) {
              this.aleary = true;
              this.phonemessage = "该账户已存在，请直接登录";
            } else {
              this.phonemessage = "";
            }
          }
        );
      }
    },
    // 倒计时
    settime() {
      let count = 60;
      $("#vertifyCode")
        .css("pointer-events", "none")
        .text(count + "秒后重新发送");
      let timer = null;
      timer = setInterval(function() {
        if (count > 0) {
          count = count - 1;
          $("#vertifyCode").text(count + "秒后重新发送");
        } else {
          $("#vertifyCode").css("pointer-events", "");
          $("#vertifyCode").text("获取验证码");
          this.codetime = true;
          count = 60;
          clearInterval(timer);
        }
      }, 1000);
    },
    yz() {
      let pattern = /^1[34578]\d{9}$/;
      let pattern2 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if ($("#phone").val() === "") {
        this.phonemessage = "请填写账号";
      } else if (!pattern.test($("#phone").val())) {
        this.phonemessage = "手机号不正确";
      } else if ($("#pwd1").val() === "" || $("#pwd2").val() === "") {
        this.passwordmessage = "请填写密码";
      } else if ($("#pwd1").val() !== $("#pwd2").val()) {
        this.suremessage = "两次密码不一致";
      } else if (!pattern2.test($("#pwd1").val())) {
        this.passwordmessage = "密码格式不正确";
      } else if (this.passwords.trim().length < 6) {
        this.passwordmessage = "密码强度太弱";
      } else {
        return "ok";
      }
    },
    getCode() {
      this.password();
      this.surepassword();
      this.phonecheck(true);
      if (!this.codetime) return;
      if (this.yz() === "ok") {
        this.settime();
        this.codetime = false;
        u.verifyCode(
          {
            username: $("#phone").val(),
            type: "register"
            // password: $("#pwd1").val()
          },
          data => {
            if (data) {
              this.code = data[0].checkCode;
              this.flag = true;
            }
            // if (data[0].code == 400) {
            //   alert("该手机号已注册");
            // }
          }
        );
      } else {
      }
    },
    registerUser() {
      this.password();
      this.surepassword();
      this.codesures();
      this.phonecheck(true);
      if (this.yz() !== "ok") {
        return;
      }
      if (!this.flag) {
        // alert("请先获取验证码");
        return (this.surecodemessage = "请先获取验证码");
      }

      if ($("#code").val() === "") {
        // alert("请填写验证码");
        return (this.surecodemessage = "请填写验证码");
      } else if ($("#code").val() !== this.code) {
        // alert("验证码错误");
        return (this.surecodemessage = "验证码错误");
      } else {
        u.register(
          {
            username: $("#phone").val(),
            password: $("#pwd1").val(),
            checkCode: $("#code").val()
          },
          data => {
            if (data[0].code == 200) {
              u.setStore("user", {
                name: $("#phone").val(),
                userid: $("#phone").val()
              });
              this.$router.push({ path: "/login" });
            } else {
              // alert("注册失败");
              this.$parent.loading({
                message: "注册失败",
                type: false
              });
            }
          }
        );
      }
    },
    changePage(d) {
      this.$router.push({ path: d });
    }
  },
  components: {}
};
</script>
<style lang="stylus" scoped>
html, body {
  overflow: auto !important;
}

.aleary {
  color: red;
  // float: left;
  // position: relative;
  // top: -25px;
  // left: 25px;
  line-height: 30px;
  padding-left: 20px;
  height: 30px;
  color: white;
  // font-size: 28px;
  font-weight: bold;
  text-shadow: 0 1px #ce4a3e, 1px 0 #ce4a3e, -1px 0 #ce4a3e, 0 -1px #ce4a3e;
}

.register {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 1200px;
  min-height: 900px;
  background-image: url('../../static/image/ginsengbg2.png');
  background-size: 100% 100%;

  .content {
    width: 630px;

    > p {
      margin-bottom: 60px;
      font-size: 34px;
      font-weight: bold;
      text-align: center;
      -webkit-text-fill-color: white;
      // -webkit-text-stroke: 1px rgba(137, 64, 0, 0.4);
      text-shadow: 0 1px #9e5d1e, 1px 0 #9e5d1e, -1px 0 #9e5d1e, 0 -1px #9e5d1e;
    }

    .r-form {
      padding: 30px 26px;
      width: 100%;
      height: 707px;
      background-image: url('../../static/image/registerbg.png');
      background-size: 100% 100%;

      > h3 {
        margin-bottom: 41px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        -webkit-text-fill-color: white;
        // -webkit-text-stroke: 1px rgba(137, 64, 0, 0.75);
        text-shadow: 0 3px #9e5d1e, 2px 0 #9e5d1e, -2px 0 #9e5d1e, 0 -1px #9e5d1e;
      }

      .rf-line {
        position: relative;
        // margin-bottom: 30px;
        padding: 0 27px;
        width: 100%;
        height: 73px;
        line-height: 73px;
        background-image: url('../../static/image/r-linebg.png');
        background-size: 100% 100%;

        span {
          display: inline-block;
        }

        .label {
          width: 135px;
          font-size: 24px;
          font-weight: bold;
          -webkit-text-fill-color: white;
          text-shadow: 0 2.5px #3a230a, 2px 0 #3a230a, -2px 0 #3a230a, 0 -2px #3a230a;
        }

        input {
          width: 270px;
          font-size: 24px;
          font-weight: bold;
          background: none;
          outline: none;
          border: 0;
          -webkit-text-fill-color: white;
          text-shadow: 0 2px #9e5d1e, 2px 0 #9e5d1e, -2px 0 #9e5d1e, 0 -2px #9e5d1e;
        }

        .code-btn {
          position: absolute;
          top: 16px;
          right: 26px;
          width: 111px;
          height: 38px;
          line-height: 35px;
          text-align: center;
          font-size: 14px;
          font-family: MicrosoftYaHei-Bold;
          font-weight: bold;
          cursor: pointer;
          background-image: url('../../static/image/rcode-btn.png');
          background-size: 100% 100%;
          -webkit-text-fill-color: white;
          -webkit-text-stroke: 1px rgba(137, 64, 0, 0.75);
        }
      }

      /* pointer-events none */
      .registerBtn {
        margin: 0 auto;
        margin-top: 27px;
        width: 276px;
        height: 80px;
        line-height: 75px;
        text-align: center;
        font-size: 26px;
        font-family: MicrosoftYaHei-Bold;
        font-weight: bold;
        cursor: pointer;
        background-image: url('../../static/image/register-btn.png');
        background-size: 100% 100%;
        -webkit-text-fill-color: white;
        text-shadow: 0 2.5px #a65d08, 2px 0 #a65d08, -2px 0 #a65d08, 0 -2px #a65d08;
      }

      .loginWay {
        margin: 0 auto;
        margin-top: 23px;
        width: 181px;
        font-size: 22px;
        font-weight: bold;
        cursor: pointer;
        -webkit-text-fill-color: white;
        // -webkit-text-stroke: 1px rgba(137, 64, 0, 0.84);
        text-shadow: 0 3px #9e5d1e, 2px 0 #9e5d1e, -2px 0 #9e5d1e, 0 -1px #9e5d1e;
      }
    }
  }
}
</style>
